import React from "react";
import { Route, Routes, Link } from "react-router-dom";

import MyLayout from "./views/MyLayout";
import Login from "./views/Login";
import Home from "./views/Home";
import About from "./views/About";
import Setting from "./views/Setting";
import Todo from "./views/Todo";
import Employee from "./views/Employee";
import Role from "./views/Role";
import ActivityList from "./views/ActivityList";
import ActivityType from "./views/ActivityType";

function App() {
  return (
    <div className="App">
      <div className="app-header">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/setting">Setting</Link>
        <Link to="/todo">Todo</Link>
        <Link to="/activity/type">ActivityType</Link>
        <Link to="/employee">Employee</Link>
        <Link to="/role">Role</Link>
        <Link to="/activity/list">ActivityList</Link>
        <Link to="/login">Login</Link>
      </div>
      <Routes>
        <Route path="/" element={<MyLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="todo" element={<Todo />} />
          <Route path="employee" element={<Employee />} />
          <Route path="role" element={<Role />} />
          <Route path="activity/list" element={<ActivityList />} />
          <Route path="activity/type" element={<ActivityType />} />
          <Route path="setting" element={<Setting />} />
        </Route>
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  );
}

export default App;
